import { useState } from 'react'
import './style.scss'
import SvgIcon from '@/components/SvgIcon'
const Workspace = () => {
  const [isShowToolBar, setIsShowToolBar] = useState(false)
  return (
    <div id="workspace">
      {/* 左侧操作栏 */}
      <div
        className={`tool-bar tool-bar--left ${isShowToolBar ? '' : 'tool-bar--left-hide'}`}
      >
        <div
          className={`
            tool-bar__close-btn
            tool-bar__close-btn--left
            ${isShowToolBar ? '' : 'tool-bar__close-btn--left-hide'}
          `}
          onClick={() => setIsShowToolBar((pre) => !pre)}
        >
          <SvgIcon name="arrow" />
        </div>
      </div>
      <div id="workspace-container"></div>
      {/* 右侧操作栏 */}
      <div
        className={`tool-bar tool-bar--right ${isShowToolBar ? '' : 'tool-bar--right-hide'}`}
      >
        <div
          className={`
            tool-bar__close-btn
            tool-bar__close-btn--right
            ${isShowToolBar ? '' : 'tool-bar__close-btn--right-hide'}
          `}
          onClick={() => setIsShowToolBar((pre) => !pre)}
        >
          <SvgIcon name="arrow" />
        </div>
      </div>
    </div>
  )
}
export default Workspace
